<template>
  <div class="container">
    <div class="mainContainer" style="padding-bottom:160rpx">
      <div class="empty" v-if="list.length==0">暂无任何报价</div>
      <div class="card" v-for="(item,index) in list" :key="index">
        <div class="leftArea">
          <van-checkbox
            :value="item.checked"
            checked-color="#07c160"
            @change="checkChange($event,index)"
          ></van-checkbox>
          <div style="margin-left: 8px">
            <div class="name">
              <span>{{item.text}}</span>
            </div>
          </div>
        </div>
        <div class="rightArea">
          <van-stepper min="1" v-model="item.quantity" @change="onChange($event,index)" />
        </div>
      </div>
      <div>
        <van-field
          autosize
          label="配送备注"
          input-align="right"
          class="shoppingDetail"
          @change="remarkChange"
          :value="remark"
          type="textarea"
          placeholder="输入配送备注"
        />
        <van-field
          label="加急"
          input-align="right"
          class="shoppingDetail"
          @click="select"
          :value="tagSelectValue"
          placeholder="请选择"
        />
      </div>
    </div>
    <div class="buttonArea">
      <div class="total">
        <span>合计：</span>
        <span class="priceInter">{{total}}</span>
        <span style="margin-left: 10rpx;">种品类</span>
      </div>
      <div class="allocation" v-if="submitStatus" @click="confirmSave">提交配送</div>
      <div class="allocation" style="opacity:.4" v-else>提交配送</div>
    </div>
    <van-popup :show="showDialog" position="bottom" close-on-click-overlay>
      <van-picker
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
        show-toolbar
        title="请选择"
      />
    </van-popup>
  </div>
</template>

<script>
import { formatTime } from "@/utils/index";
import card from "@/components/card";
import { batchAdd } from "@/http";
import store from "@/utils/factory.js";

export default {
  components: {
    card
  },

  data() {
    return {
      logs: [],
      appData: {},
      checked: false,
      total: 0,
      list: [],
      submitStatus: true,
      remark: "",
      columns: [{ text: "是", code: "true" }, { text: "否", code: "false" }],
      tagSelectValue: "",
      urgent: false,
      showDialog: false
    };
  },
  methods: {
    tel: function(phone) {
      mpvue.makePhoneCall({
        phoneNumber: phone
      });
    },
    toggle(index, checked, id) {
      console.log(this.list);
      this.list[index].checked = !checked;
    },
    select() {
      this.showDialog = true;
    },
    onChange(e, index) {
      this.list[index].quantity = e.mp.detail;
      console.log(this.list);
    },
    onConfirm(e) {
      this.tagSelectValue = e.mp.detail.value.text;
      this.urgent = e.mp.detail.value.code;
      this.showDialog = false;
    },
    onCancel() {
      this.showDialog = false;
    },
    checkChange(e, index) {
      console.log(e.mp.detail);
      this.list[index].checked = e.mp.detail;
      this.$forceUpdate();
      if (e.mp.detail) {
        this.total = this.total + 1;
      } else {
        this.total = this.total - 1;
      }
    },
    back() {
      mpvue.navigateBack({
        delta: 1
      });
    },
    del(category) {
      let self = this;
      mpvue.showModal({
        title: "提示",
        content: "确定删除该报价么？",
        complete: function(res) {
          if (res.confirm) {
            self.list.splice(self.list.findIndex(v => v.id === category), 1);
            console.log(self.list);
            store.set("shopList", self.list);
            self.total = total - 1;
          }
        }
      });
    },
    remarkChange(e) {
      this.remark = e.mp.detail;
    },
    confirmSave() {
      let a = [];
      let self = this;
      if (!this.submitStatus) {
        return false;
      }
      if (this.list.length == 0) {
        mpvue.showToast({
          title: "暂无任何清单",
          icon: "none",
          duration: 2000
        });
        return false;
      }
      this.submitStatus = false;
      this.list.map(item => {
        if (item.checked) {
          a.push({
            category: item.id,
            quantity: item.quantity
          });
        }
      });
      batchAdd({
        deliveries: a,
        remark: this.remark,
        urgent: this.urgent
      })
        .then(res => {
          mpvue.showModal({
            title: "成功",
            showCancel: false,
            content: "提交配送成功",
            success: function(res) {
              if (res.confirm) {
                self.submitStatus = true;
                mpvue.navigateBack({
                  delta: 1
                });
                store.remove("shopList");
                self.list = [];
                self.total = 0;
              }
            }
          });
        })
        .catch(err => {
          self.submitStatus = true;
        });
    }
  },
  onShow() {
    this.list = store.get("shopList") || [];
    console.log(this.list);
    this.list.map(item => {
      item.checked = true;
    });
    this.submitStatus = true;
    this.total = this.list.length;
  },
  mounted() {},
  created() {}
};
</script>

<style>
.card {
  display: flex;
  font-size: 28rpx;
  background: #fff;
  position: relative;
  align-items: center;
  margin: 20rpx;
  border-radius: 8rpx;
  padding: 36rpx 20rpx !important;
}

.delArea span {
  background: #ee0a24;
  color: #fff;
  padding: 8rpx 24rpx;
  border-radius: 8rpx;
}

.detailRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  position: relative;
  font-size: 28rpx;
}

.detailRow::after {
  position: absolute;
  box-sizing: border-box;
  -webkit-transform-origin: center;
  transform-origin: center;
  content: " ";
  pointer-events: none;
  top: auto;
  right: 0;
  bottom: 0;
  left: 15px;
  border-bottom: 1px solid #eee;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}

.leftArea {
  display: flex;
  align-items: center;
  flex: 1;
  padding-right: 40rpx;
}

.urgent {
  font-size: 24rpx;
  background: #0099ff;
  color: #fff;
  padding: 6rpx 16rpx;
  border-radius: 4rpx;
  margin-left: 10rpx;
}

.name {
  font-size: 32rpx;
}

.remark {
  font-size: 24rpx;
  color: #999999;
}

.delArea {
  margin-top: 30rpx;
  text-align: right;
}

.empty {
  text-align: center;
  margin-top: 20rpx;
  color: #999999;
  font-size: 28rpx;
}

.total {
  font-size: 24rpx;
  font-weight: 500;
  flex: 1;
}

.price {
  color: #ee0a24;
}

.priceInter {
  color: #ee0a24;
  font-size: 40rpx;
}

.card::after {
  position: absolute;
  box-sizing: border-box;
  -webkit-transform-origin: center;
  transform-origin: center;
  content: " ";
  pointer-events: none;
  top: auto;
  right: 0;
  bottom: 0;
  left: 15px;
  border-bottom: 1px solid #eee;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
.left {
  flex: 1;
}
.right {
  color: #a4a4a4;
}

.back {
  background: #222222 !important;
  color: #fff !important;
}

.allocation {
  color: #222222;
  width: 220rpx;
  text-align: center;
  height: 80rpx;
  font-weight: 500;
  line-height: 80rpx;
  border: none;
  border-radius: 80rpx;
  background: #ffc300;
}

.buttonArea {
  display: flex;
  color: #323233;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 130rpx;
  background: #fff;
  padding: 0 30rpx;
  box-shadow: 2rpx 0 20rpx #dcdfe6;
}
</style>
